<template>
    <view id="view_warper" :class="{ pdf_download: pdfDownload }" class="view_warper cardBg">
        <view class="inquiry-title">火灾直接财产损失申报统计表</view>
        <table border="1" cellspacing="0" cellpadding="0" class="table_content">
            <tr>
                <th colspan="10">以下由受损单位（个人）填写</th>
                <th colspan="10">以下由消防机构填写</th>
            </tr>
            <tr>
                <th :rowspan="maxDecorationRowspan" class="vertical">建构筑物及装修</th>
                <th style="height: 63rpx" class="vertical">序号</th>
                <th colspan="2">建筑结构及装修名称</th>
                <th colspan="2">烧损面积（m2）</th>
                <th colspan="2">建造时价格（元）</th>
                <th colspan="2">已使用时间（年）</th>
                <th colspan="2">折旧年限（年）</th>
                <th colspan="2">烧损率（%）</th>
                <th colspan="2">烧损面积（m2）</th>
                <th colspan="2">重置价值或修复费（元）</th>
                <th colspan="2">统计损失（元）</th>
            </tr>
            <tr v-for="(item, index) in formData.lossDecorationList" :key="index + 'a'">
                <td style="height: 26rpx">{{ index + 1 }}</td>
                <td colspan="2">{{ item.name }}</td>
                <td colspan="2">{{ item.burningArea.toFixed(2) }}</td>
                <td colspan="2">{{ item.buildingValue.toFixed(2) }}</td>
                <td colspan="2">{{ item.buildedYear && item.buildedYear.toFixed(2) }}</td>
                <td colspan="2">{{ item.rebuildYear && item.rebuildYear.toFixed(2) }}</td>
                <td colspan="2">{{ item.burningRate && item.burningRate.toFixed(2) }}</td>
                <td colspan="2">{{ item.burningArea1 && item.burningArea1.toFixed(2) }}</td>
                <td colspan="2">{{ item.rebuildValue && item.rebuildValue.toFixed(2) }}</td>
                <td colspan="2">{{ calcValue(item) }}</td>
            </tr>

            <template v-if="formData.lossDecorationList && formData.lossDecorationList.length < 8">
                <tr v-for="index in 8 - formData.lossDecorationList.length" :key="index + 'b'">
                    <td style="height: 26rpx">{{ index + formData.lossDecorationList.length }}</td>
                    <td v-for="(value, key) in 8" :key="key + 'b'" colspan="2">
                        <span>&nbsp;</span>
                    </td>
                    <td colspan="2">&nbsp;</td>
                </tr>
            </template>
            <tr>
                <td style="height: 60rpx" colspan="9">
                    <view class="total-wrapper">
                        <span>申报损失小计</span>
                        <span>{{ declareTotal || "&nbsp;" }}元</span>
                    </view>
                </td>
                <td colspan="10">
                    <view class="total-wrapper">
                        <span>统计损失小计</span>
                        <span>{{ practicalTotal || "&nbsp;" }}元</span>
                    </view>
                </td>
            </tr>
            <tr>
                <th :rowspan="maxDeviceRowspan" class="vertical">设备及其他财产</th>
                <th rowspan="2" style="height: 63rpx" class="vertical">序号</th>
                <th rowspan="2" colspan="2">名称</th>
                <th rowspan="2" colspan="2">数量</th>
                <th rowspan="2" colspan="2">购进时单价（元）</th>
                <th rowspan="2" colspan="2">已使用时间（年）</th>
                <th rowspan="2" colspan="2">折旧年限（年）</th>
                <th rowspan="2" colspan="2">烧损率（%）</th>
                <th colspan="4" style="height: 23rpx;">重置价值</th>
                <th rowspan="2" colspan="2">统计损失（元）</th>
            </tr>
            <tr>
                <th colspan="2" style="height: 40rpx">单价</th>
                <th colspan="2">数量</th>
            </tr>

            <tr v-for="(item, index) in formData.lossDeviceList" :key="index + 'c'">
                <td style="height: 28rpx">{{ index + 1 }}</td>
                <td colspan="2">{{ item.name }}</td>
                <td colspan="2">{{ item.count }}</td>
                <td colspan="2">{{ item.buyingValue && item.buyingValue.toFixed(2) }}</td>
                <td colspan="2">{{ item.usedValue && item.usedValue.toFixed(2) }}</td>
                <td colspan="2">{{ item.reusedYear && item.reusedYear.toFixed(2) }}</td>
                <td colspan="2">{{ item.burningRate && item.burningRate.toFixed(2) }}</td>
                <td colspan="2">{{ item.unitPrice && item.unitPrice.toFixed(2) }}</td>
                <td colspan="2">{{ item.unitCount }}</td>
                <td colspan="2">{{ calcDeviceValue(item) || "&nbsp;" }}</td>
            </tr>

            <template v-if="formData.lossDeviceList && formData.lossDeviceList.length < 7">
                <tr v-for="index in 7 - formData.lossDeviceList.length" :key="index + 'd'">
                    <td style="height: 50rpx">{{ index + formData.lossDeviceList.length }}</td>
                    <td v-for="(value, key) in 8" :key="key + 'c'" colspan="2">
                        <span>&nbsp;</span>
                    </td>
                    <td colspan="2">&nbsp;</td>
                </tr>
            </template>

            <tr>
                <td colspan="9" style="height: 60rpx;">
                    <view class="total-wrapper">
                        <span>申报损失小计</span>
                        <span>{{ deviceDeclareTotal }}元</span>
                    </view>
                </td>
                <td colspan="10">
                    <view class="total-wrapper">
                        <span>统计损失小计</span>
                        <span>{{ devicePracticalTotal }}元</span>
                    </view>
                </td>
            </tr>
            <tr>
                <th colspan="10" style="height: 60rpx;">
                    <view class="total-wrapper">
                        <span>申报损失总计</span>
                        <span>{{ parseFloat(declareTotal) + parseFloat(deviceDeclareTotal) }}元</span>
                    </view>
                </th>
                <th colspan="10">
                    <view class="total-wrapper">
                        <span>统计损失总计</span>
                        <span>{{ parseFloat(practicalTotal) + parseFloat(devicePracticalTotal) }}元</span>
                    </view>
                </th>
            </tr>
            <tr>
                <th colspan="10">
                    <view style="min-height: 120rpx; padding: 0 10rpx; line-height: 32rpx;font-size: 13px"
                        class="text_align_left">
                        <view class="text_align_left" flex="cross:center">
                            <span>受损单位填表人（签名）：</span>
                            <!-- <span>{{ formData.preparer }}</span> -->
                            <img :src="formData.preparer" alt="" srcset="" height="32" />
                        </view>
                        <view class="text_align_left" flex="cross:center">
                            <view>
                                申报日期：
                                <span>{{ parseTime(formData.preparerTime, "{y}年{m}月{d}日") }}</span>
                            </view>
                        </view>
                        <view class="text_align_left">
                            受损单位（个人）联系人：
                            <span>{{ formData.contactor }}</span>
                        </view>
                        <view class="text_align_left" flex="cross:center">
                            <view> 联系电话：
                                <span>{{ formData.contactorPhone }}</span>
                            </view>
                        </view>
                    </view>
                </th>
                <th colspan="10" style="line-height: 36rpx;text-align: left;padding: 10rpx;font-size: 13px;">
                    <view flex>
                        <span style="display:inline-block;width: 80rpx;">统计单位：</span>
                        <span>{{ formData.statisticsOrg }}</span>
                    </view>
                    <view flex="main:justify">
                        <span style="display:inline-block;width: 100px;"> 统计人（签名）:</span>
                        <span>{{ formData.statisticstor }}</span>
                        <view>
                            <span style="margin-left: 10rpx">{{ parseTime(formData.statisticsTime, "{y}年{m}月{d}日") }}</span>
                        </view>
                    </view>
                    <view flex="main:justify">
                        <span style="display:inline-block;width: 200rpx;">审批人（签名）:</span>
                        <span>{{ formData.approvaltor }}</span>
                        <view>
                            <span style="margin-left: 10rpx">{{ parseTime(formData.approvalTime, "{y}年{m}月{d}日") }}</span>
                        </view>
                    </view>
                </th>
            </tr>
        </table>
    </view>
</template>

<script>
export default {
    props: {
        formData: {
            type: Object,
            default: () => ({ lossDecorationList: [], lossDeviceList: [] })
        },
        pdfDownload: {
            type: Boolean,
        }
    },
    computed: {
        declareTotal() {
            if (!this.formData.lossDecorationList) return;
            const value = this.formData.lossDecorationList.reduce((prev, curr) => {
                return prev + curr.burningArea * curr.buildingValue;
            }, 0);
            return value.toFixed(2);
        },
        practicalTotal() {
            if (!this.formData.lossDecorationList) return;
            const value = this.formData.lossDecorationList.reduce((prev, curr) => {
                return prev + parseFloat(this.calcValue(curr));
            }, 0);
            return value.toFixed(2);
        },
        deviceDeclareTotal() {
            if (!this.formData.lossDeviceList) return;
            const value = this.formData.lossDeviceList.reduce((prev, curr) => {
                return prev + curr.count * curr.buyingValue;
            }, 0);
            return value.toFixed(2);
        },
        devicePracticalTotal() {
            if (!this.formData.lossDeviceList) return;
            const value = this.formData.lossDeviceList.reduce((prev, curr) => {
                return prev + parseFloat(this.calcDeviceValue(curr));
            }, 0);
            return value.toFixed(2);
        },
        maxDecorationRowspan() {
            const { lossDecorationList } = this.formData;
            return this.getRowspan(lossDecorationList, 2);
        },
        maxDeviceRowspan() {
            const { lossDeviceList } = this.formData;
            return this.getRowspan(lossDeviceList, 3);
        },
        getRowspan() {
            return (list, additionalRows) => {
                const defaultRowspan = 10;
                const actualRowspan = list ? list.length + additionalRows : 0;
                return Math.max(defaultRowspan, actualRowspan);
            };
        },
    },
    methods: {
        calcValue(item) {
            let value = item.burningArea1 * item.rebuildValue * (1 - item.buildedYear / item.rebuildYear);
            if (item.userable) {
                value = (value * item.burningRate) / 100;
            }
            return value.toFixed(2);
        },
        calcDeviceValue(item) {
            const rate = parseFloat((1 - (1 / item.reusedYear) * item.usedValue));
            let value = item.unitCount * item.unitPrice * rate;
            if (item.userable) {
                value = (value * item.burningRate) / 100;
            }
            return value.toFixed(2);
        },
    }
}
</script>
<style scoped lang="scss">
.view_warper {
    font-size: 14px;
    color: #000;
    padding: 15rpx 30rpx;
    overflow-y: auto;

    &.cardBg {
        padding-left: 20rpx;
        padding-right: 50rpx;
    }

    .inquiry-title {
        text-align: center;
        font-weight: bold;
        font-size: 50rpx;
    }

    &.pdf_download {
        padding: 63.5rpx 79.25rpx;
    }

    p,
    pre {
        margin: 0;
        line-height: 40rpx;

        span {
            text-decoration: underline;
            display: inline-block;
        }
    }

    pre {
        text-decoration: underline;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    .table_content {
        border-collapse: collapse;
        width: 100%;
        text-align: center;
        vertical-align: center;
        box-sizing: border-box;
        color: #606266;
        table-layout: fixed;
        height: 1000rpx;
        font-size: 16px;

        .vertical {
            width: 36rpx;
            writing-mode: vertical-rl;
        }

        .total-wrapper {
            padding: 0 30rpx 0 10rpx;
            display: flex;
            justify-content: space-between;
        }

        td {
            position: relative;
            word-wrap: break-word;
            word-break: break-all;

            &>input,
            &>textarea,
            &>.box {
                position: absolute;
                height: 100%;
                width: 100%;
                top: 0;
                left: 0;
                text-align: left;
                padding-left: 10rpx;
                box-sizing: border-box;
                border: none;
                resize: none;
                font-family: inherit;
                background-color: #ebf0ff;
            }

            .el-input__inner {
                border: none;
            }

            input[type="date"],
            input[type="time"] {
                background-color: #ebf0ff;
            }
        }
    }
}
</style>